<template>
  <div class="app-container">
    <el-row class="margin-bottom">
      <el-col :span="12">
        <el-input v-model="regex" size="small" class="" placeholder="请输入正则表达式" >
          <div slot="append">
            <el-button size="small" :disabled="!regex" type="primary" @click="regexData">正则随机数据</el-button>
          </div>
        </el-input>
      </el-col>
      <el-col :span="12">
        <el-autocomplete style="width: 100%" :fetch-suggestions="querySearch" v-model="spel" size="small" class="" placeholder="spel表达式" >
          <div slot="append">
            <el-button size="small" :disabled="!spel" type="primary" @click="spelData">spel数据</el-button>
          </div>
        </el-autocomplete>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-select v-model="choseClassloader.classloaderName" size="small" style="width: 150px" @change="changeClassloader">
          <el-option
            v-for="classloader in classloaders"
            :key="classloader"
            :value="classloader"
            :label="classloader"
          />
        </el-select>

        <el-select v-model="choseClassloader.choseClassName" filterable class="margin-left" size="small" style="width: calc(50%)" @change="changeClassName">
          <el-option v-for="loadclass in choseClassloader.loadClasses" :key="loadclass.className" :value="loadclass.className" :label="loadclass.className" />
        </el-select>

        <el-button class="margin-left" :disabled="!choseClassloader.choseClassName" size="small" @click="randomClassData">类随机数据</el-button>
        <el-button size="small" :disabled="!choseClassloader.choseClassName" @click="spiderData">爬虫数据</el-button>
      </el-col>
    </el-row>

    <el-row class="margin-top">
      <el-col :span="24">
        <div class="margin-bottom">
          <label >生成数量: </label>
          <el-input-number v-model="generate.size" size="mini" :min="1" :max="20" />
        </div>
        <json-editor :json="generate.datas" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import core from '@/api/core'
import JsonEditor from '@/components/JsonEditor'
import database from '@/api/database'
const Base64 = require('js-base64').Base64

export default {
  name: 'randomdata',
  components: { JsonEditor },
  data() {
    return {
      classloaders: [],
      choseClassloader: {
        classloaderName: null,
        loadClasses: [],
        choseClassName: null
      },
      regex: null,
      spel: null,
      randomMethods: [],
      generate: {
        size: 1,
        datas: []
      }
    }
  },
  mounted() {
    this.loadClassloaders()

    this.loadSpels();
  },
  methods: {
    loadSpels(){
      database.loadRandomMethods().then(res => {
        this.randomMethods = res.data;
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.randomMethods;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadClassloaders() {
      core.classloaders().then(res => {
        this.classloaders = res.data
        if (this.classloaders != null && this.classloaders.length > 0) {
          this.choseClassloader.classloaderName = this.classloaders[0]
          this.changeClassloader()
        }
      })
    },
    changeClassloader() {
      core.listLoadedClasses(this.choseClassloader.classloaderName).then(res => {
        this.choseClassloader.loadClasses = res.data
        if (this.choseClassloader.loadClasses && this.choseClassloader.loadClasses.length > 0) {
          this.choseClassloader.choseClassName = this.choseClassloader.loadClasses[0].className
          this.changeClassName()
        }
      })
    },
    randomClassData() {
      core.randomListData(this.choseClassloader.choseClassName, this.choseClassloader.classloaderName, this.generate.size).then(res => {
        this.generate.datas = res.data
      })
    },
    regexData() {
      core.randomRegexData(Base64.encode(this.regex), this.generate.size).then(res => {
        this.generate.datas = res.data
      })
    },
    spiderData() {
      core.spiderData().then(res => {
        this.generate.datas = [res.data]
      })
    },
    spelData(){
      core.spelData(this.spel,this.generate.size).then(res =>{
        this.generate.datas = res.data;
      })
    },
    changeClassName() {

    }
  }
}
</script>


